import Label from "./FormLabel";
import FormGroup from "./FormGroup";
import InputGroup from "./InputGroup";
import UploadThub from "./UploadThub/index";
import FormItemType from "./FormItemType";
import Editor from "./editor";
import Star from "./Star";
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
export default React.createClass({
    propsType: {
        required: React.PropTypes.bool,
        name: React.PropTypes.string,
        label: React.PropTypes.string,
        tips: React.PropTypes.string,
        type: React.PropTypes.oneOfType([
            FormItemType.EDITOR,
            FormItemType.INPUT,
            FormItemType.TEXT_AREA,
            FormItemType.SELECT,
        ]),
        onchange: React.PropTypes.func,
    },
    getInitialState(){
        return {
            startDate: Moment(),
            endDate: Moment(),
        }
    },
    getDefaultProps(){
        return {

            required: false, //必填项 default false,
            name: 'name',
            label: '标签',
            tips: '',
            placeholder: '',
            type: FormItemType.INPUT,
            onchange: function (val) {
                console.log(val);
            }
        };
    },
    handleChangeStart(date){
        this.setState({
            startDate: date
        });
        this.props.onchange(this.props.index, {startDate: date})
    },
    handleChangeEnd(date){
        this.setState({
            endDate: date
        });
        this.props.onchange(this.props.index, {endDate: date})
    },
    handleDateChange(date){
        this.setState({
            startDate: date
        });
        this.props.onchange(this.props.index, date)
    },
    render(){
        const self = this;
        console.log(this.props.value);
        return (
            <FormGroup className={this.props.tips.length ? 'has-error' : ''}>
                <Label>{this.props.required ? <Star></Star> : ''}{this.props.label}</Label>
                <InputGroup>
                    {this.props.type == FormItemType.INPUT ?
                        <input name={this.props.name}
                               className="form-control"
                               type="text"
                               onChange={(e)=> {
                                   this.props.onchange(self.props.index, e.target.value)
                               }}
                               value={self.props.value}
                               defaultValue={self.props.value || ''}
                               placeholder={this.props.placeholder || this.props.label}/> : ''}
                    {this.props.type == FormItemType.TEXT_SHOW ?
                        <p className="form-control form-control-text">{this.props.value}</p> : ''}
                    {
                        this.props.type == FormItemType.TEXT_AREA ?
                            <textarea name={this.props.name} cols="30" rows="10" className="form-control"
                                      onChange={(e)=> {
                                          this.props.onchange(self.props.index, e.target.value)
                                      }}
                                      value={this.props.value}
                                      defaultValue={this.props.value}
                                      placeholder={this.props.placeholder || this.props.label}></textarea> : ''
                    }
                    {
                        this.props.type == FormItemType.TIME_RANGE ?
                            <div>
                                <DatePicker
                                    selected={this.state.startDate}
                                    selectsStart
                                    locale="en-gb"
                                    startDate={this.state.startDate}
                                    endDate={this.state.endDate}
                                    onChange={this.handleChangeStart}/>
                                <DatePicker
                                    selected={this.state.endDate}
                                    selectsEnd
                                    locale="en-gb"
                                    startDate={this.state.startDate}
                                    endDate={this.state.endDate}
                                    onChange={this.handleChangeEnd}/>
                            </div> : ''
                    }
                    {
                        this.props.type == FormItemType.UPLOAD ?
                            <UploadThub defaultValue={this.props.value} onsuccess={(result)=> {
                                this.props.onchange(self.props.index, result);
                            }}></UploadThub> : ''
                    }
                    {
                        this.props.type == FormItemType.SELECT ? this.props.children : ''
                    }
                    {
                        this.props.type == FormItemType.RADIO ? this.props.children : ''
                    }
                    {
                        this.props.type == FormItemType.MODAL_CHECK_BOX ? this.props.children : ''
                    }
                    {
                        this.props.type == FormItemType.DATE ?
                            <div>
                                <DatePicker
                                    selected={this.state.startDate}
                                    locale="en-gb"
                                    onChange={this.handleDateChange}/>
                            </div> : ''
                    }
                    {
                        this.props.type == FormItemType.EDITOR ? <Editor
                            name={this.props.name}
                            onchange={(content)=> {
                                self.props.onchange(self.props.index, content)
                            }}
                            id={this.props.name}
                            height={200}
                            value={this.props.value}
                            disabled={false}>{this.props.value}</Editor> : ''
                    }

                    {this.props.type == FormItemType.TEXT_SHOW ? '' : <p className="help-block">{this.props.tips}</p>}
                </InputGroup>
            </FormGroup>
        )
    }
})
